<template>
  <div class="draw-award">
    <div v-show="showShare">
      <img
        class="btn-first-share"
        src="~@/assets/img/drawAward/btn_stare01.png"
        alt=""
        v-show="!isFirstShare"
      />
      <img
        class="btn-share"
        src="~@/assets/img/drawAward/btn_stare02.png"
        alt=""
        v-show="isFirstShare"
      />
    </div>

    <div class="award-mask mask">
      <div class="mask-content award-mask-content fadeInBottom">
        <img :src="imgSrc" alt="" class="mask-award-img" />
        <img
          src="~@/assets/img/drawAward/btn_sxlw.png"
          alt=""
          class="btn-next"
          @click="drawAward"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { WxShare } from "@/utils/wxConfig";
import { getIsFinishFirstShare } from "@/api/common";

export default {
  name: "DrawAward",
  data() {
    return {
      showShare: true,
      isFirstShare: false,
      imgSrc: "",
      lottery: {
        1: "http://qiniu.whxgjt.com/dfh2/lw_01.png", // 东方小红抱枕
        2: "http://qiniu.whxgjt.com/dfh2/lw_02.png", // 东方小红超长鼠标垫
        3: "http://qiniu.whxgjt.com/dfh2/lw_03.png", // 东方小红手提袋（红）
        4: "http://qiniu.whxgjt.com/dfh2/lw_04.png", // 东方小红手提袋（黑）
        5: "http://qiniu.whxgjt.com/dfh2/lw_fxcg.png", // 东方小红徽章（随机款）
      },
    };
  },
  methods: {
    async getIsFinishFirstShare() {
      const openid = localStorage.getItem("openid");
      if (!openid) return;
      this.$showLoading();
      try {
        const res = await getIsFinishFirstShare(openid);
        const data = res.data;
        if (data.errorCode === 0) {
          this.isFirstShare = data.data;
        }
      } catch (e) {
        console.log(e);
      }
      this.$closeLoading();
    },
    drawAward() {
      this.$router.push("/getRecord");
    },
  },
  created() {
    WxShare();
  },
  mounted() {
    const giftId = this.$route.query.giftId;
    const isShare = this.$route.query.isShare; // 是否是分享
    this.imgSrc = this.lottery[giftId];
    this.getIsFinishFirstShare();
    if (isShare) this.showShare = false;
  },
};
</script>

<style lang="scss" scoped>
.draw-award {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
  background-image: url("http://qiniu.whxgjt.com/dfh2/bg_award.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  position: relative;

  .btn-first-share {
    width: 97px;
    height: 56px;
    position: absolute;
    top: 13px;
    right: 10px;
    z-index: 1001;
  }

  .btn-share {
    width: 56px;
    height: 56px;
    position: absolute;
    top: 13px;
    right: 18px;
    z-index: 1001;
  }

  .mask-award-img {
    height: 409px;
  }
}

.award-mask {
  background: rgba(0, 0, 0, 0.2);
}

.award-mask-content {
  top: 50px;
}
</style>